<template>
  <div class="track_the_playback">
    <div class="around">
      <!-- 设置时间 -->
      <i class="el-icon-time" title="设置时间段" @click="openDataList"></i>
      <!-- 数据列表 -->
      <i class="el-icon-s-operation" title="打开数据列表" @click="openDataList"></i>
    </div>
    <div class="container">
      <div id="map"></div>
    </div>
    <div class="around"></div>
    <!-- 数据列表 -->
    <div class="data_list" v-if="dataListShow">
      <h2>
        <span></span>
        <i class="iconfont icon-guanbi" @click="dataListShow = false"></i>
      </h2>
      <div class="content">
        <el-table :data="dataList" style="width: 100%">
          <el-table-column fixed prop="date" label="经度" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="纬度" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="速度" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="方向" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="定位时间" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="状态" width="180"></el-table-column>
          <el-table-column fixed prop="date" label="位置" width="180"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import DirectionImg from '@/assets/direction.jpg'

import eventBus from '@/eventBus.js'

export default {
  data () {
    return {
      map: null,
      dataListShow: false,
      dataList: []
    }
  },
  methods: {
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.centerAndZoom(new BMap.Point(117.2, 39.15), 15)// 初始化地图,设置中心点坐标和地图级别
      // this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15)// 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity('天津市')// 设置地图显示的城市 此项是必须设置的
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
    },
    // 轨迹回放画线
    async addLine () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanerAllListApi?ClientNo=${this.$route.query.ClientNo}`)
      console.log(data)

      this.map.centerAndZoom(new BMap.Point(data[0].LONGITUDE, data[0].LATITUDE), 13)

      let ary = []
      const _this = this
      function add (point) {
        ary.push(new BMap.Point(point.LONGITUDE, point.LATITUDE))
        const polyline = new BMap.Polyline(ary, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 1 })
        _this.map.addOverlay(polyline)
      }

      data.forEach((element, index) => {
        setTimeout(() => {
          add(element)
          if (index > 0) this.createPoint(data[index - 1].LONGITUDE, data[index - 1].LATITUDE, data[index].LONGITUDE, data[index].LATITUDE)
        }, 1000 * index)
      })
    },
    // 创建标记点
    createPoint (lng1, lat1, lng2, lat2) {
      // 获取两个标记点的角度
      const k = this.getAngle(lng1, lat1, lng2, lat2)
      // 创建标记点
      const pt = new BMap.Point(lng1, lat1)
      // 标记点图片
      const myIcon = new BMap.Icon(DirectionImg, new BMap.Size(20, 26))
      // 添加图片
      const marker = new BMap.Marker(pt, { icon: myIcon })
      //设置标记点方向
      marker.setRotation(k)
      // 将标注添加到地图中
      this.map.addOverlay(marker)
    },
    // 获取两个点的角度
    getAngle (lng_a, lat_a, lng_b, lat_b) {
      const a = (90 - lat_b) * Math.PI / 180;
      const b = (90 - lat_a) * Math.PI / 180;
      const AOC_BOC = (lng_b - lng_a) * Math.PI / 180;
      const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      const sinc = Math.sqrt(1 - cosc * cosc);
      const sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc;
      const A = Math.asin(sinA) * 180 / Math.PI;
      let res = 0;
      if (lng_b > lng_a && lat_b > lat_a) res = A;
      else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
      else if (lng_b > lng_a && lat_b == lat_a) res = 90;
      else if (lng_b < lng_a && lat_b == lat_a) res = 270;
      else if (lng_b == lng_a && lat_b > lat_a) res = 0;
      else if (lng_b == lng_a && lat_b < lat_a) res = 180;
      return res;
    },
    openDataList () {
      this.dataListShow = true
    },
    // 获取数据
    async getDataList (VID, startTime, endTime) {
      const params = {
        VID,
        startTime,
        endTime
      }

      const { data } = await this.$Http.get('/DataListCompany/GetWorkerTrackApi', { params })
    }

  },
  mounted () {
    // 显示地图
    this.mapShow()
    // 画线
    // setTimeout(() => {
    //   this.addLine()
    // }, 2000)
  },
  created () {
    eventBus.$on('trajectoryBack', val => {
      console.log(val);
      this.getDataList(val)
    })
  }
}
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .around {
    height: 20px;
    background-color: #2ea9fa;
    &:first-child {
      padding-left: 10px;
      height: 30px;
      // line-height: 30px;
      i {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 4px;
      }
      .el-icon-s-operation {
        font-size: 26px;
      }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
  }
}
.data_list {
  width: 90%;
  height: 80%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 5px 3px #ccc;
  border-radius: 8px;
  overflow: hidden;
  h2 {
    height: 30px;
    line-height: 30px;
    background-color: pink;
    i {
      float: right;
      margin-right: 10px;
    }
  }
}
</style>